
import { Radio, RadioChangeEvent, Tooltip } from "antd";
import React from "react";
import Icon from '@ant-design/icons';
import Controller from 'Controller';
import styles from './index.module.less';
import { ReactComponent as palmSvg } from './svg/palm.svg';
import { ReactComponent as positionSvg } from './svg/position.svg';
import { ReactComponent as orientationSvg } from './svg/orientation.svg';
import { ReactComponent as scaleSvg } from './svg/scale.svg';
import { ReactComponent as selectSvg } from './svg/select.svg';

const tools = [
    {
        name: '选取工具',
        key: 'select',
        icon: selectSvg,
    },{
        name: '摄像头轨道',
        key: 'palm',
        icon: palmSvg,
    },{
        name: '位置',
        key: 'position',
        icon: positionSvg,
    },{
        name: '方向',
        key: 'orientation',
        icon: orientationSvg,
    },{
        name: '变形',
        key: 'scale',
        icon: scaleSvg,
    },
]

export default function PanelSceneElement() {

    const threeController = Controller.instance.useMemo(s => s.threeController, []);

    const selectedTool = threeController.useMemo(s => s.selectedTool, []);

    const onChangeRadioGroup = React.useCallback((e: RadioChangeEvent) => {
        threeController.pipeline(async s => { s.selectedTool = e.target.value })()
    }, [threeController])

    return (
        <div className={styles.panelMouseTool} >
            <Radio.Group className={styles.radioGroup} value={selectedTool} buttonStyle="solid" onChange={onChangeRadioGroup}>
                {tools.map(e => {
                    return (
                        <Radio.Button value={e.key}>
                            <Tooltip title={e.name} >
                                <Icon component={e.icon} />
                            </Tooltip>
                        </Radio.Button>
                    )
                })}
            </Radio.Group>
        </div>
    )
} 